<template>
    <div class="statisticsbox">
        <div>
            <div id="main"></div>
            <div style="overflow: hidden">
                <div style="float: right;margin-right: 20%;margin-bottom: 50px">
                    <button @click="lastup" :disabled="sumup <= 1 ? true : false" style="margin-right: 20px">上一页</button>
                    <button @click="nextup" :disabled="disableup">下一页</button>
                </div>
            </div>
        </div>
        <div>
            <div id="main1"></div>
            <div style="overflow: hidden">
                <div style="float: right;margin-right: 20%;margin-bottom: 50px">
                    <button @click="lastdonw" :disabled="sumdown <= 1 ? true : false" style="margin-right: 20px">上一页</button>
                    <button @click="nextdonw" :disabled="disableddowm">下一页</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import {getfoode} from '../api/api'
    export default {
        name: "statistics",
        data(){
            return{
                sumup:1,
                sumdown:1,
                disableddowm:false,
                disableup:false,
                name:[],
                up:[],
                name1:[],
                down:[]
            }
        },
        methods:{
            //线上的上下页
            lastup(){
                this.disableup = false
                if(this.sumup > 1){
                    this.sumup = this.sumup - 1
                    this.getup(`${this.sumup}`)
                }
            },
            nextup(){
                this.sumup = this.sumup + 1
                this.getup(`${this.sumup}`)
                getfoode(`${this.sumup}+1`,'up').then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.disableup = true
                        }
                    }
                })
            },
            //线下的上下页
            lastdonw(){
                this.disableddowm = false
                if(this.sumdown > 1){
                    this.sumdown = this.sumdown - 1
                    this.getdown(`${this.sumdown}`)
                }
            },
            nextdonw(){
                this.sumdown = this.sumdown + 1
                this.getdown(`${this.sumdown}`)
                getfoode(`${this.sumdown}+1`,'down').then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                       if(res.data.length == 0){
                           this.disableddowm = true
                       }
                    }
                })
            },
            //获取线上销售信息
            getup(n){
                getfoode(`${n}`,'up').then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0) {
                            this.$message({
                                message: '没有更多数据',
                                type: 'info'
                            });
                        }else {
                            res.data.forEach(value=>{
                                this.name.push(value.name)
                                this.up.push(value.sales_up)
                            })
                        }
                    }
                })

            },
            //获取线下销售信息
            getdown(n){
                getfoode(`${n}`,'down').then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.$message({
                                message: '没有更多数据',
                                type: 'info'
                            });
                        }else {
                            res.data.forEach(value=>{
                                this.name1.push(value.name)
                                this.down.push(value.sales_down)
                            })
                        }
                    }
                })
            }
        },
        created() {
            this.getup(1)
            this.getdown(1)
        },

        mounted() {
            setTimeout(() => {
                var myChart = echarts.init(document.getElementById('main'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '线上销售情况'
                    },
                    tooltip: {},
                    xAxis: {
                        data: this.name
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: this.up
                        }
                    ]
                });
                var myChart1 = echarts.init(document.getElementById('main1'));
                // 绘制图表
                myChart1.setOption({
                    title: {
                        text: '线下销售情况'
                    },
                    tooltip: {},
                    xAxis: {
                        data: this.name1
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: this.down
                        }
                    ]
                });
            }, 1000)





        }
    }
</script>

<style scoped>
    #main {
        height: 500px;
    }
    #main1{
        height: 500px;
    }
</style>
